<template>
  <el-row class="el-range-input"
       role="rangeInput"
  >
    <el-col :span="10">
      <el-input
        v-model.number="firstValue"
      />
    </el-col>
    <el-col :span="2" style="text-align: center;">-</el-col>
    <el-col :span="10">
      <el-input
        v-model.number="secondValue"
      />
    </el-col>

  </el-row>
</template>

<script type="text/babel">
  import Emitter from 'element-ui/src/mixins/emitter';

  export default {
    name: 'ElRangeInput',

    mixins: [Emitter],

    inject: {
      elForm: {
        default: ''
      }
    },

    props: {
      min: {
        type: Number,
      },
      max: {
        type: Number,
      },
      value: {
        type: [Number, Array],
      },
      label: {
        type: String
      },
    },

    components: {},

    data() {
      return {
        firstValue: undefined,
        secondValue: undefined,
        oldValue: null,
      };
    },

    watch: {
      value(val, oldVal) {
        console.log(val)
        if (this.dragging ||
          Array.isArray(val) &&
          Array.isArray(oldVal) &&
          val.every((item, index) => item === oldVal[index])) {
          return;
        }
        this.setValues();
      },

      firstValue() {
        this.$emit('input', [this.minValue, this.maxValue]);
      },

      secondValue() {
        this.$emit('input', [this.minValue, this.maxValue]);
      },

      min() {
        this.setValues();
      },

      max() {
        this.setValues();
      }
    },

    methods: {
      valueChanged() {
        return ![this.minValue, this.maxValue]
          .every((item, index) => item === this.oldValue[index]);
      },
      setValues() {
        if (this.min > this.max) {
          console.error('[Element Error][Slider]min should not be greater than max.');
          return;
        }
        console.log(this.value)
        const val = this.value;
        if (Array.isArray(val)) {
          if (val[1] < this.min) {
            this.$emit('input', [this.min, this.min]);
          } else if (val[0] > this.max) {
            this.$emit('input', [this.max, this.max]);
          } else if (val[0] < this.min) {
            this.$emit('input', [this.min, val[1]]);
          } else if (val[1] > this.max) {
            this.$emit('input', [val[0], this.max]);
          } else {
            this.firstValue = val[0];
            this.secondValue = val[1];
            if (this.valueChanged()) {
              this.dispatch('ElFormItem', 'el.form.change', [this.minValue, this.maxValue]);
              this.oldValue = val.slice();
            }
          }
        }
      },

      emitChange() {
        this.$nextTick(() => {
          this.$emit('change', this.range ? [this.minValue, this.maxValue] : this.value);
        });
      }
    },

    computed: {
      minValue() {
        return Math.min(this.firstValue, this.secondValue);
      },

      maxValue() {
        return Math.max(this.firstValue, this.secondValue);
      },

    },

    mounted() {
      // let valuetext;
        if (Array.isArray(this.value)) {
          this.firstValue = Math.max(this.min, this.value[0]);
          this.secondValue = Math.min(this.max, this.value[1]);
        }
        else {
          this.firstValue = this.min;
          this.secondValue = this.max;
        }
        this.oldValue = [this.firstValue, this.secondValue];
      //   valuetext = `${this.firstValue}-${this.secondValue}`;
      // this.$el.setAttribute('aria-valuetext', valuetext);

      // label screen reader
      // this.$el.setAttribute('aria-label', this.label ? this.label : `slider between ${this.min} and ${this.max}`);
    },
  };
</script>

<style lang="scss" scoped>
  .el-input-number{
    width: 100%;
  }
</style>
